<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/website/common/base.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我的订单</title>
    <%@ include file="/website/common/common.jsp" %>
    <link href="${webctx }/css/manage.css" rel="stylesheet" type="text/css"/>
    <link href="${webctx }/css/order.css" rel="stylesheet" type="text/css"/>
</head>
<style>
    /*.give-sp{*/
    /*display: inline-block;*/
    /*margin-right: 5px;*/
    /*width: 40px;*/
    /*height: 20px;*/
    /*text-align: center;*/
    /*line-height: 20px;*/
    /*color: #ff6767;*/
    /*font-size: 12px;*/
    /*border: 1px solid #ff6767;*/
    /*}*/

    .pro-info-con .pro-pic {
        float: left;
        width: 90px;
        height: 90px;
        padding: 10px 20px 10px 10px;
    }

    .pro-info-con .td-inner .info-txt li {
        l font-size: 14px;
        color: #666;
        line-height: 1.3;
    }

    .pro-info-con .td-inner .info-txt li.info-title {
        font-size: 16px;
        color: #222;
        margin-bottom: 5px;
    }

    .type-th {
        background-color: #eee;
    }

    .type-th .info {
        width: 350px;
        padding-left: 100px;
    }

    .type-th .price, .type-th .num {
        width: 80px;
        padding: 0 10px;
    }

    .type-th .money, .type-th .state, .type-th .op {
        width: 119px;
    }

    .pro-info-con {
        width: 450px;
    }

    .item-info .td-price, .item-info .td-num {
        width: 80px;
        padding: 20px 10px 0 10px;
    }

    .item-info .td-money, .item-info .td-state, .item-info .td-op {
        width: 118px;
    }

    .item-info .td-op {
        padding-top: 20px;
    }

    .item-info .td p:first-child {
        height: 26px;
        line-height: 23px;
        margin-bottom: 2px;
    }

    .item-info .td p {
        height: 21px;
        line-height: 21px;
        padding: 0;
    }

    .order-item {
        position: relative;
    }

    .padd-b41 {
        padding-bottom: 41px;
    }

    .order-item.height-auto {
        max-height: 371px;
        overflow: hidden;
    }

    .reminder {
        position: absolute;
        bottom: 0px;
        left: 1px;
        right: 1px;
        height: 40px;
        background-color: #fff;
        border: 1px solid #ececec;

    }

    .reminder p {
        float: left;
        line-height: 40px;
        padding-left: 250px;
        padding-right: 20px;
        color: #666;
        font-size: 14px;
        background: url("${webctx}/images/nima1.jpg") no-repeat right center;
        cursor: pointer;
    }

    .reminder p.pack-up {
        background: url("${webctx}/images/nima2.jpg") no-repeat right center;
    }

    .reminder p em {
        color: #ff6767;
    }

    .info-title span {
        margin-top: 2px;
        padding: 0 2px;
        font-size: 12px;
        color: #ff6767;
        border: 1px solid #ff6767;
        margin-right: 3px;
    }
    .right-title{
        border-bottom:none;
    }

</style>
<body>
<%@ include file="/website/common/top.jsp" %>
<%@ include file="/website/common/head.jsp" %>
<%@ include file="/website/common/menu.jsp" %>

<div class="warp-body" style="background-color: #fff;">
    <div style="width: 100%; height: 3px; background-color: #0daeff;"></div>
    <div class="inner clearfix">
        <div class="left-main">
            <div class="left-inner">
                <%@ include file="/website/user/left.jsp" %>
            </div>
        </div>
        <div class="right-main">
            <div class="right-inner" id="orderlistpanel">
                <!-- 订单列表 -->
                <div class="right-title"><span></span>我的订单</div>

                <div class="order-hd">
                    <div class="order-inp2 fr clearfix">
                        <div class="time" style="display: none">下单时间：<input name="start" id="timestart"
                                                                            value="${start }" type="text"
                                                                            class="easyui-datebox"
                                                                            style="height:28px;width:115px"><span>到</span><input
                                name="end" id="timeend" type="text" value="${end }" class="easyui-datebox"
                                style="height:28px;width:115px"></div>
                        <div class="select-inp J_select_con">
                            <input type="hidden" name="timetype" value="${timetype }">
                            <input type="text" name="timetypename" value="${timetypename }" readonly="readonly"
                                   class="J_select_hd" style="background-color: #fff;">
                            <i></i>
                            <div class="select-bd J_select_bd">
                                <ul>
                                    <li val="1">近三个月的订单</li>
                                    <li val="2">近一年的订单</li>
                                    <li val="">全部</li>
                                </ul>
                            </div>
                        </div>
                        <div class="help-search fr clearfix">
                            <input type="text"  name="queryList" value="${queryList }" placeholder="订单编号/商品名称/商品编码">
                            <a href="javascript:query(1);">搜索</a>
                        </div>
                    </div>
                </div>

                <div class="order-type">
                    <ul class="tab-list">
                        <li
                                <c:if test="${empty status }">class="cur"</c:if> status="">全部订单
                        </li>
                        <li
                                <c:if test="${status==1 }">class="cur"</c:if> status="1">待付款
                        </li>
                        <li
                                <c:if test="${status==3 }">class="cur"</c:if> status="3">待发货
                        </li>
                        <li
                                <c:if test="${status==7 }">class="cur"</c:if> status="7">待收货
                        </li>
                        <li
                                <c:if test="${status==11 }">class="cur"</c:if> status="11">已完成
                        </li>
                        <li
                                <c:if test="${status==13 }">class="cur"</c:if> status="13">已取消
                        </li>
                    </ul>
                </div>


                <div class="type-th clearfix">
                    <div class="info th">订单信息</div>
                    <div class="price th">商品价格</div>
                    <div class="num th">数量</div>
                    <div class="money th">订单金额</div>
                    <div class="state th">订单状态</div>
                    <div class="op th">操作</div>
                </div>
                <c:forEach items="${list }" var="order">
                    <div class="order-item <c:if test="${order.productlist.size() >3 }"> padd-b41  </c:if> height-auto">
                        <table width="100%" class="order-item-con">
                            <tbody class="item-th">
                            <tr>
                                <td><span>订单编号${order.code } </span><span>下单时间：${order.order_time }</span></td>
                                <td></td>
                                <td colspan="4"></td>
                            </tr>
                            </tbody>
                            <tbody class="item-info">
                            <c:if test="${order.productlist.size() >3 }">
                                <div class="reminder">
                                    <p onclick="fold(this)">共 <em>${order.order_number}</em> 件商品，<span>展开查看全部</span></p>
                                </div>
                            </c:if>


                            <c:forEach items="${order.productlist }" var="product" varStatus="status">
                                <tr>
                                    <td>
                                        <div class="pro-info-con fl clearfix">
                                            <div class="pro-pic"><a href="${ctx }/product/info?priceid=${product.id}"
                                                                    target="_blank"><img
                                                    src="<%=getRandomFileserver()%>${product.photo}" width="95"
                                                    height="95" alt=""
                                                    onerror="this.src='${ctx }/website/images/noimg.jpg'"></a></div>
                                            <div class="td-inner">

                                                <ul class="info-txt">
                                                    <li class="info-title"><c:if
                                                            test="${product.gift == 1}"><span>赠品</span></c:if>${product.productname } ${product.name }
                                                    </li>
                                                    <li class=" info-company">厂家：4
                                                        <c:choose>
                                                            <c:when test="${fn:length(product.B_chanjia) > 12}">
                                                                <c:out value="${fn:substring(product.B_chanjia, 0, 12)}..."/>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <c:out value="${product.B_chanjia}"/>
                                                            </c:otherwise>
                                                        </c:choose>
                                                    </li>
                                                    <li class="info-stan">规格：${product.B_guige }</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="td-price td fl">
                                            <p>￥${product.buyprice }</p>
                                        </div>
                                        <div class="td-num td fl"><p>×${product.buyamount }</p></div>
                                    </td>

                                    <c:if test="${status.count==1}">
                                        <td rowspan="${order.productlist.size() }"
                                            style="vertical-align:top;padding-top:20px;">
                                            <div class="td-money td chuichuinima2"><p>￥${order.pay_money }</p></div>
                                        </td>
                                        <td rowspan="${order.productlist.size() }"
                                            style="vertical-align:top;padding-top:20px;">
                                            <div class="td-state td chuichuinima2">
                                                <p id="status${order.code }">${order.statustxt}</p>
                                            </div>
                                        </td>
                                        <td rowspan="${order.productlist.size() }" style="vertical-align:top">
                                            <div class="td-op td chuichuinima">
                                                <p><a href="javascript:showinfo('${order.code }');">查看订单</a></p>
                                                <c:choose>
                                                    <c:when test="${order.status==1}">
                                                        <p><a href="javascript:cancelorder('${order.code }');">取消订单</a>
                                                        </p>
                                                        <%--<p><a href="${ctx }/order/orderconfirm?ordercode=${order.code }">继续提交</a></p>--%>
                                                        <p><a href="${ctx }/payment/cashier/${order.code }">继续支付</a></p>
                                                    </c:when>
                                                    <c:when test="${order.status==2 || (order.status==3 && order.issyn<=0)}">
                                                        <p><a href="javascript:cancelorder('${order.code }');">取消订单</a>
                                                        </p>
                                                    </c:when>
                                                    <c:when test="${order.status==7}">
                                                        <p><a href="javascript:;"
                                                              onclick="shouhuo('${order.code }',this)">确定收货</a></p>
                                                    </c:when>
                                                    <c:when test="${order.status==9 || order.status==11}">
                                                        <c:if test="${order.backtag==0 }">
                                                            <p><a href="javascript:tuoihuo('${order.code }');">申请退货</a>
                                                            </p>
                                                        </c:if>
                                                        <c:if test="${order.commenttag==1 }">
                                                            <!-- <a href="javascript:;">去评价</a> -->
                                                        </c:if>
                                                        <p><a href="javascript:buyagain('${order.code }');">再次购买</a></p>
                                                    </c:when>
                                                </c:choose>
                                            </div>
                                        </td>
                                    </c:if>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>


                    </div>
                </c:forEach>
                ${pagehtml }
                <!-- 订单列表结束 -->
            </div>
            <div class="right-inner hide" id="orderinfopanel">
                <!-- 订单详情 -->
                <div style="text-align:center;margin:20px;">正在加载订单详情...</div>
                <!-- 订单详情结束 -->
            </div>
        </div>
    </div>
</div>

<%@ include file="/website/common/foot.jsp" %>
<link type="text/css" rel="stylesheet" href="${webctx }/css/webeasyui.css">
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/util/js/easyui-1.3.3/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script src="${webctx }/js/orderlist.js"></script>
</body>
</html>
<script>

    function fold(obj) {
        if ($(obj).hasClass("pack-up")) {
            $(obj).removeClass("pack-up");
            $(obj).find("span").text("展开查看全部");
        } else {
            $(obj).addClass("pack-up");
            $(obj).find("span").text("点击收起列表");
        }
        $(obj).parents(".order-item").toggleClass("height-auto");
    }

    $(function () {
        setLeftCur("orderlist");

        $(document).click(function () {
            $(".J_select_bd").hide();
        })
        $('.J_select_hd').click(function (e) {
            var that = $(this)
            that.parents('.J_select_con').find('.J_select_bd').toggle()
            e ? e.stopPropagation() : event.cancelBubble = true;
            that.parents('.J_select_con').find('.J_select_bd li').click(function () {
                var subText = $(this).text()
                that.val(subText);
                $("[name='timetype']").val($(this).attr("val"));

            })
        })
        $(".tab-list li").click(function () {
            $(".tab-list li").removeClass("cur");
            $(this).addClass("cur");
            query(1);
        })

    })
    function query(n) {
        var queryList =$("[name='queryList']").val();

        var url = ctx + "/order/orderlist?pno=" + n;
//	url+="&ordercode="+$("[name='ordercode']").val();
//	url+="&productname="+encodeURIComponent($("[name='productname']").val());
//	url+="&productcode="+$("[name='productcode']").val();
//        url += "&start=" + $("[name='start']").val();
//        url += "&end=" + $("[name='end']").val();
        url += "&queryList=" + encodeURI(encodeURI($.trim(queryList)));
        url += "&timetype=" + $("[name='timetype']").val();
        url += "&status=" + $(".tab-list li.cur").attr("status");

        window.location.href = url;
    }
    function showinfo(ordercode) {
        $("#orderlistpanel").addClass("hide");
        $("#orderinfopanel").removeClass("hide");
        $(window).scrollTop(80);
        $w.loadPanel(ctx + "/order/loadorderinfo", {"ordercode": ordercode}, "orderinfopanel");
    }
    function gopage(n) {
        query(n);
    }
    function topageclick() {
        if ($("[name='topagenum']").val() != "")
            query($("[name='topagenum']").val());
    }

</script>